window.onload = function () {
    /*1、动态生成气球（生成dom元素，初始化）
        1.生成几个气球?
            var num = 10;
        2.创建气球
            1.createElemrnt创建标签
            2.添加属性（类名）
            3.把节点添加到body里
        3.创建多个气球
            1.for循环
            2.文档节点片段
            3.初始化函数
        4.完善属性
            1.纵向top值等于浏览器高度 top = wH
            2.横向 随机 0 —— wW
                伪随机数（包括0，不包括1）  Math.random()  0-1随机数
            3. ~~取整，边界限制（Math.max(最小，最大)）；

    * 2、气球向上移动
    *   1.获取所有气球
    *   2.循环每一个气球
    *   3.改变他们的top值
    *       top = 当前 - 变量
    *   4.定时器循环执行move函数
    *   5.自定义属性 speed
    * 3、点击气球，气球做动画后消失
    *   1.点击事件
    *   2.事件委托（监听整个文档上发生的点击事件）
    *   3.干掉点击的节点
    *       找到父级元素，然后干掉子级元素
    *   4.数组的处理
    *       找到数组中对应的当前对象并删除
    *       splice
    *       indexOf,lastIndexOf（查询数组要倒序查询）
    * 4、气球动画
    *
    * */


    var num = 20;  //初始化数目10个
    //浏览器宽度高度
    var wH = window.innerHeight;
    var wW = window.innerWidth;
    var bZ = 160;
    var balloons = [];  //存放气球数量
    var timer = null;  //定时器

    init(num);
    timer = setInterval(move, 60);

    //监听整个文档上发生的点击事件
    document.addEventListener('click', function (e) {  // e就是事件对象
        if (e.target.className === 'balloon') {
            //气球消失  干掉这个节点
            // e.target.parentNode.removeChild(e.target);

            //this call apply bind
            boom.call(e.target);
            //干掉一个要重新生成
            init(1);

            var index = balloons.lastIndexOf(e.target);
            balloons.splice(index, 1);
        }
    });

    //消失动画
    function boom() {
        var rotate = [30,80];
        var index = 0;
        this.timer = setInterval(function(){
            //this => window
            index++;
            index%= 2;
            this.speed ++ ;  //求模取余
            this.style.top = this.offsetTop - this.speed + 'px';
            this.style.width = this.offsetWidth - 10 +'px';
            this.style.height = this.offsetHeight - 10 + 'px';
            this.style.transform = 'rotate('+rotate[index]+'deg)';
        }.bind(this),1000/60)   //硬绑定（将setInterval里的this强制绑定为bind里的this）
    }

    //初始化函数（模块化）
    function init(num) {
        //先把创建的dom节点放到节点片段里，再把节点片段放到body里（dom渲染回流），这样只渲染一次，优化性能
        var fragment = document.createDocumentFragment();   //节点片段
        for (var i = 0; i < num; i++) {  //js中，for/if不是块级作用域

            var randomX = ~~(Math.random() * wW) - bZ;  //位运算（抛弃小数位）
            randomX = Math.max(0, randomX);  //设置左右边界限制

            var oBalloon = document.createElement('div');
            oBalloon.className = 'balloon';
            oBalloon.style.top = wH - bZ + 'px';  //设置top值
            oBalloon.style.left = randomX + 'px';
            oBalloon.speed = ~~(Math.random() * 7) + 1;  //随机速度1-7

            balloons.push(oBalloon);  //
            fragment.appendChild(oBalloon);
        }
        document.body.appendChild(fragment);
    }

    function move() {
        for (var i = 0, len = balloons.length; i < len; i++) {
            //循环所有气球节点
            balloons[i].style.top = balloons[i].offsetTop - balloons[i].speed + 'px';
            if (balloons[i].offsetTop < -bZ) {
                balloons[i].style.top = wH + 'px';
            }
        }
    }


};

